<template>
  <div v-if="innerForm">
    <el-form ref="innerForm" :model="innerForm" label-width="110px">
      <el-row type="flex" justify="space-between">
        <el-col :span="10">
          <el-form-item label="企业" prop="orgName">
            <el-select
              disabled
              style="width: 100%"
              v-model="innerForm.orgName"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in options"
                :key="index"
                :label="item.orgName"
                :value="item.orgNo"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :pull="2" :span="10">
          <el-form-item
            :label="timeType ? '月份：' : '年份：'"
            :prop="timeType ? 'month' : 'year'"
          >
            <el-date-picker
              v-model="innerForm[timeType ? 'month' : 'year']"
              :type="timeType ? 'month' : 'year'"
              :placeholder="timeType ? '请选择月份' : '请选择年份'"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="10">
          <el-form-item label="户名" prop="customerName">
            <el-input v-model="innerForm.customerName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :pull="2" :span="10">
          <el-form-item label="户号" prop="customerNo">
            <el-input v-model="innerForm.customerNo"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="10">
          <el-form-item label="地址" prop="address">
            <el-input v-model="innerForm.address"></el-input>
          </el-form-item>
        </el-col>
        <el-col :pull="2" :span="10">
          <el-form-item label="市场化属性" prop="marketizationAttributeName">
            <el-select
              v-model="innerForm.marketizationAttribute"
              placeholder="请选择"
            >
              <el-option
                v-for="item in SCHSX"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="10">
          <el-form-item label="计费方式" prop="declareWayName">
            <el-select v-model="innerForm.declareWay" placeholder="请选择">
              <el-option
                v-for="item in JFFS"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :pull="2" :span="10">
          <el-form-item label="联系人" prop="contactName">
            <el-input v-model="innerForm.contactName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="10">
          <el-form-item label="联系电话" prop="contactPhone">
            <el-input v-model="innerForm.contactPhone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :pull="2" :span="10">
          <el-form-item label="总电量" prop="ecValueMT">
            <el-input class="kWh" v-model="innerForm.ecValueMT"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="10">
          <el-form-item label="尖电量" prop="ecValueMF1">
            <el-input class="kWh" v-model="innerForm.ecValueMF1"></el-input>
          </el-form-item>
        </el-col>
        <el-col :pull="2" :span="10">
          <el-form-item label="峰电量" prop="ecValueMF2">
            <el-input class="kWh" v-model="innerForm.ecValueMF2"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="10">
          <el-form-item label="平电量" prop="ecValueMF3">
            <el-input class="kWh" v-model="innerForm.ecValueMF3"></el-input>
          </el-form-item>
        </el-col>
        <el-col :pull="2" :span="10">
          <el-form-item label="谷电量" prop="ecValueMF4">
            <el-input class="kWh" v-model="innerForm.ecValueMF4"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="10">
          <el-form-item label="总电费" prop="totalCharge">
            <el-input
              class="yuan"
              v-model.number="innerForm.totalCharge"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :pull="2" :span="10">
          <el-form-item label="电度电费" prop="degreeCharge">
            <el-input
              class="yuan"
              v-model.number="innerForm.degreeCharge"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="10">
          <el-form-item label="基本电费" prop="basicCharge">
            <el-input
              class="yuan"
              v-model.number="innerForm.basicCharge"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :pull="2" :span="10">
          <el-form-item label="力调电费" prop="adjustCharge">
            <el-input
              class="yuan"
              v-model.number="innerForm.adjustCharge"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="10">
          <el-form-item label="平均电价" prop="avgPrice">
            <el-input
              class="yuan"
              v-model.number="innerForm.avgPrice"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :pull="2" :span="10"> </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item label="用电概况建议" prop="elecUseSuggest">
            <el-input
              type="textarea"
              resize="none"
              v-model="innerForm.elecUseSuggest"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="10">
          <el-form-item label="运行容量" prop="runCapacity">
            <el-input class="kVA" v-model="innerForm.runCapacity"></el-input>
          </el-form-item>
        </el-col>
        <el-col :pull="2" :span="10">
          <el-form-item label="最大需量" prop="maxDemand">
            <el-input class="kW" v-model="innerForm.maxDemand"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item label="基本电费建议" prop="basicChargeSuggest">
            <el-input
              type="textarea"
              resize="none"
              v-model="innerForm.basicChargeSuggest"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="10">
          <el-form-item label="功率因数" prop="pft">
            <el-input v-model="innerForm.pft"></el-input>
          </el-form-item>
        </el-col>
        <el-col :pull="2" :span="10"> </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item label="力调电费建议" porp="adjustChargeSuggest">
            <el-input
              type="textarea"
              resize="none"
              v-model="innerForm.adjustChargeSuggest"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item label="购电分析建议" prop="purchaseAnalysisSuggest">
            <el-input
              type="textarea"
              resize="none"
              v-model="innerForm.purchaseAnalysisSuggest"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="10">
          <el-form-item label="建议新装光伏容量" prop="addPhotovoltaicCapacity">
            <el-input
              class="kVA"
              v-model="innerForm.addPhotovoltaicCapacity"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :pull="2" :span="10">
          <el-form-item label="可消纳电量" prop="consumptionEpower">
            <el-input
              class="kWh"
              v-model="innerForm.consumptionEpower"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="10">
          <el-form-item label="节省总电费" prop="economizeTotalCharge">
            <el-input
              class="yuan"
              v-model="innerForm.economizeTotalCharge"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :pull="2" :span="10">
          <el-form-item label="节省基本电费" prop="economizeBasicCharge">
            <el-input
              class="yuan"
              v-model="innerForm.economizeBasicCharge"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="10">
          <el-form-item label="节省电度电费" prop="economizeDegreeCharge">
            <el-input
              class="yuan"
              v-model="innerForm.economizeDegreeCharge"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :pull="2" :span="10">
          <el-form-item label="优化后平均电价" prop="optimizeAvgPrice">
            <el-input
              class="yuan-kWh"
              v-model="innerForm.optimizeAvgPrice"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item label="绿电建议" prop="greenElecSuggest">
            <el-input
              type="textarea"
              resize="none"
              v-model="innerForm.greenElecSuggest"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="text-align: center">
        <el-button type="primary" @click="submit">保 存</el-button>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { getSelect } from '@/api/monReport'
export default {
  name: 'editDialogFrom',
  props: ['timeType', 'formItem'],
  data() {
    return {
      innerForm: {},
      options: [],
      SCHSX: [],
      JFFS: []
    }
  },
  async created() {
    const res = await getSelect({ dictType: 'Asset_SCHSX' })
    const res1 = await getSelect({ dictType: 'Asset_SBFS' })
    this.SCHSX = res.data.list
    this.JFFS = res1.data.list
    console.log(this.SCHSX)
    console.log(this.JFFS)
  },
  watch: {
    formItem: {
      handler(newVal) {
        console.log(newVal)
        this.innerForm = { ...newVal } // 监听editItem prop的变化，更新本地数据
      },
      deep: true,
      immediate: true
    },
    'innerForm.month': {
      handler(newVal) {
        this.innerForm.month = dayjs(newVal).format('YYYY-MM')
      }
    },
    'innerForm.year': {
      handler(newVal) {
        this.innerForm.year = dayjs(newVal).format('YYYY')
      }
    },
    'innerForm.declareWay': {
      handler(newVal) {
        if (this.innerForm.declareWay) {
          this.innerForm.declareWayName = this.JFFS.find(
            (item) => item.value === newVal
          ).text
        }
      }
    },
    'innerForm.marketizationAttribute': {
      handler(newVal) {
        if (this.innerForm.marketizationAttribute) {
          this.innerForm.marketizationAttributeName = this.SCHSX.find(
            (item) => item.value === newVal
          ).text
        }
      }
    }
  },
  methods: {
    submit() {
      this.$emit('editSubmit', this.innerForm)
    }
  }
}
</script>

<style lang="scss" scoped>
.kWh {
  position: relative;
  &::after {
    content: 'kWh';
    position: absolute;
    top: 0;
    right: -40px;
  }
}
.yuan {
  position: relative;
  &::after {
    content: '元';
    position: absolute;
    top: 0;
    right: -40px;
  }
}
::v-deep .el-textarea__inner {
  height: 100px;
}
.kVA {
  position: relative;
  &::after {
    content: 'kVA';
    position: absolute;
    top: 0;
    right: -40px;
  }
}
.kW {
  position: relative;
  &::after {
    content: 'kW';
    position: absolute;
    top: 0;
    right: -40px;
  }
}
.yuan-kWh {
  position: relative;
  &::after {
    content: '元/kWh';
    position: absolute;
    top: 0;
    right: -60px;
  }
}
</style>
